<template>
	<view class="">
		<view class="tabbar-frame" :style="{
			backgroundColor: bgc
		}">
			<view class="tabbar-bg-frame" :style="{
				left: `${gap}rpx`,
			}">
				<view class="tabbar-bg-left"></view>
				<image src="/static/images/tabbar/tabbar-bg.png" class="tabbar-bg" mode=""></image>
				<view class="tabbar-bg-right"></view>
			</view>
			<view class="tabbar-item-frame">
				<view class="highlight" :style="{
					left: `calc(75rpx + ${current * 150}rpx - 25px)`,
					transform: `rotate(${(360 * current) + 45}deg)`
				}">
					<image src="/static/images/tabbar/creation.png" class="creation"></image>
				</view>
				<view class="tabbar-item" v-for="(item, index) in tabbar" :key="index" @click="toNext(item, index + 1)">
					<view class="tabbar-img">
						<image class="tabbar-icon" :src="item.icon" :style="{
									transform: current !== index? `translateY(0)`: `translateY(-150%)`
								}"></image>
					</view>
					<view class="tabbar-text">
						{{ item.name }}
					</view>
				</view>
			</view>
		</view>
		<view class="safe-area-inset-bottom">

		</view>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
				tabbar: [{
						name: '首页',
						path: '/pages/index/index',
						icon: '/static/images/tabbar/find.png',
						highlight: false,
						navIcon: 'home',
					},
					{
						name: '评分',
						path: '/pages/tabbar/score/score',
						icon: '/static/images/tabbar/tour_guide.png',
						highlight: false,
						navIcon: 'eye',
					},
					{
						name: '发布',
						path: '/pages/tabbar/release/release',
						icon: '/static/images/tabbar/find.png',
						highlight: false,
						navIcon: 'pushpin',
					},
					{
						name: '副本',
						path: '/pages/tabbar/secretRealm/secretRealm',
						icon: '/static/images/tabbar/special_offer.png',
						highlight: false,
						navIcon: 'calendar',
					},
					{
						name: '我的',
						path: '/pages/tabbar/me/me',
						icon: '/static/images/tabbar/my.png',
						highlight: false,
						navIcon: 'account',
					},
				],
				gap: '-400',
				indexGap: 150,
				index: 0,
				current: 3,
			};
		},
		props: {
			bgc: {
				default: 'rgba(0, 0, 0, 0)',
				type: String
			},
			come: {
				type: Number
			},
			go: {
				type: Number
			}
		},
		watch: {
			// come(newVal) {
			// 	this.setStartPosition(newVal)
			// 	// this.gap = newVal
			// }
		},
		created() {
			this.setStartPosition(1, 1)
		},
		methods: {
			setEndPosition(go) {
				if (go === 1) {
					this.gap = -2 * this.indexGap
				} else if (go === 2) {
					this.gap = -1 * this.indexGap
				} else if (go === 3) {
					this.gap = 0
				} else if (go === 4) {
					this.gap = this.indexGap
				} else if (go === 5) {
					this.gap = this.indexGap * 2
				}
			},
			setStartPosition(go, go2) {
				if (go === 1) {
					this.gap = -2 * this.indexGap
				} else if (go === 2) {
					this.gap = -1 * this.indexGap
				} else if (go === 3) {
					this.gap = 0
				} else if (go === 4) {
					this.gap = this.indexGap
				} else if (go === 5) {
					this.gap = this.indexGap * 2
				}
				setTimeout(() => {
					this.setEndPosition(go2)
				}, 10)
			},
			toNext(data, index) {
				if (!data.path) return
				this.current = index - 1
				for (let i of this.tabbar) {
					i.highlight = false
				}
				this.tabbar[index - 1].highlight = true
				this.setStartPosition(this.go, index)
				this.$emit('change', {
					...data,
					index
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tabbar-frame {
		width: 100vw;
		height: 50px;
		position: fixed;
		z-index: 100;
		left: 0;
		bottom: 0;
		padding-bottom: env(safe-area-inset-bottom);

		.tabbar-item-frame {
			height: 50px;
			width: calc(100%);
			position: relative;
			z-index: 101;
			font-size: 12px;
			display: flex;
			justify-content: space-between;

			.highlight {
				position: absolute;
				bottom: 25px;
				left: calc(75rpx - 25px);
				width: 50px;
				height: 50px;
				border-radius: 50%;
				background: linear-gradient(to right top, #b68df6, #00aedd, #05cbba);
				display: flex;
				justify-content: center;
				align-items: center;
				transition: all .3s;

				.creation {
					width: 25px;
					height: 25px;
				}
			}

			.tabbar-item {
				display: flex;
				flex-direction: column;
				flex: 1;
				justify-content: center;
				align-items: center;

				.tabbar-img {
					height: 30px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: relative;
					overflow: hidden;

					.tabbar-icon {
						height: 24px;
						width: 24px;
						transition: all .3s;
					}
				}

				.tabbar-text {
					height: 20px;
				}
			}
		}

		.tabbar-bg-frame {
			width: 100vw;
			height: 50px;
			position: absolute;
			left: 0;
			top: 0;
			transition: all .3s;

			.tabbar-bg-left {
				position: absolute;
				width: 50vw;
				height: 50px;
				background-color: #fff;
				right: 100%;
				top: 0;
			}

			.tabbar-bg-right {
				position: absolute;
				width: 50vw;
				height: 50px;
				background-color: #fff;
				left: 100%;
				top: 0;
			}
		}

		.tabbar-bg {
			position: absolute;
			width: 100vw;
			height: 50px;
			left: 0;
			top: 0;
		}
	}

	.safe-area-inset-bottom {
		width: 100vw;
		height: env(safe-area-inset-bottom);
		position: fixed;
		z-index: 100;
		left: 0;
		bottom: 0;
		background-color: #fff;
	}
</style>